<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="plugins/angularjs/toaster.min.css">

    <!--引入分页插件资源-->
    <%--<script type="text/javascript" src="plugins/angularjs/angular.min.js"></script>
    <script type="text/javascript" src="plugins/angularjs/angular-animate.min.js"></script>
    <script type="text/javascript" src="plugins/angularjs/toaster.min.js"></script>
    <link rel="stylesheet" href="plugins/angularjs/pagination.css">
    <script type="text/javascript" src="plugins/angularjs/pagination.js"></script>
    <script type="text/javascript" src="js/base_pagination.js"></script>
    <script type="text/javascript" src="js/service/userService.js"></script>
    <script type="text/javascript" src="js/service/organService.js"></script>
    <script type="text/javascript" src="js/controller/baseController.js"></script>
    <script type="text/javascript" src="js/controller/userController.js"></script>--%>
    <c:set value="${pageContext.request.contextPath}" var="path"/>
    <script type="text/javascript">
        function query() {
            location.href = "${path}/User/selectByUser?page=1&pageNum=5&status=13";
        }

        function save() {
            var username = $("#username").val();
            var password = $("#password").val();
            var realName = $("#realName").val();
            var department = $("#department option:selected");

            if (username == "" || username == null) {
                alert("请填写用户名");
                return;
            }
            if (!(/^[a-zA-Z]\w{3,15}$/.test(username))) {
                alert("请输入4到16位(字母,数字,下划线,减号)用户名");
                return;
            }
            if (password == "" || password == null) {
                alert("请填写密码");
                return;
            }
            if (!(/^(\d{6,})$/.test(password))) {
                alert("密码至少6位");
                return;
            }
            if (realName == "" || realName == null) {
                alert("请填写姓名");
                return;
            }
            if (!(/^[\u4e00-\u9fa5]{2,}$/.test(realName))) {
                alert("请正确输入姓名");
                return;
            }
            if (department.val() == "" || department.val() == null) {
                alert("请选择部门");
                return;
            }
            $.ajax({
                url: "${path}/User/userInsert",
                type: "post",
                data: "username=" + username + "&realName=" + realName + "&password=" + password + "&departmentId=" + department.val(),
                dataType: "json",
                success: function (status) {
                    console.log(status);
                    if (status == true) {
                        alert("操作成功");
                        query();
                    } else {
                        $("#status").html(status);
                    }
                }
            })
        }

        function selectByUsername(username) {
            $.ajax({
                url: "${path}/User/selectByUsername",
                type: "post",
                data: "username=" + username,
                dataType: "json",
                success: function (data) {
                    $("#id").val(data.id);
                    $("#username2").val(data.username);
                    $("#realName2").val(data.realName);
                    $("#department2").val(data.department);
                }
            });
        }

        function update() {
            var id = $("#id").val();
            var username = $("#username2").val();
            var realName = $("#realName2").val();
            var department = $("#department2").val();

            if (username == "" || username == null) {
                alert("请填写用户名");
                return;
            }
            if (!(/^[a-zA-Z]\w{3,15}$/.test(username))) {
                alert("请输入4到16位(字母,数字,下划线,减号)用户名");
                return;
            }

            if (realName == "" || realName == null) {
                alert("请填写姓名");
                return;
            }
            if (!(/^[\u4e00-\u9fa5]{2,}$/.test(realName))) {
                alert("请正确输入姓名");
                return;
            }

            $.ajax({
                url: "${path}/User/update",
                type: "post",
                data: "id=" + id + "&username=" + username + "&realName=" + realName + "&departmentId=" + department,
                dataType: "json",
                success: function (status) {
                    if (status == true) {
                        alert("修改成功");
                        query();
                    }
                }
            });
        }

        function deleteById(id) {
            if (confirm("确定删除吗?")) {
                $.ajax({
                    url: "${path}/User/deleteById",
                    type: "post",
                    data: "id=" + id,
                    dataType: "json",
                    success: function (status) {
                        if (status == true) {
                            alert("删除成功");
                            query();
                        }
                    }
                });
            }
        }

        function likeQuery() {
            var realname = $("#realnames").val();
            var department = $("#departmentId option:selected");
            if (realname != null && realname != "") {
                if (!(/^[\u4e00-\u9fa5]{1,}$/.test(realname))) {
                    alert("请正确输入姓名");
                    return;
                }
            }
            if ((realname == "" || realname == null) && (department == "" || department == null)) {
                query();
            } else {
                $.ajax({
                    url: "${path}/User/selectByUserLike",
                    type: "post",
                    data: "realName=" + realname + "&departmentId=" + department.val() + "&page=1&pageNum=5",
                    success: function () {
                        location.reload();
                    }
                });
            }
        }
    </script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="shebao" ng-controller="userController"
      ng-init="selectOrganlist()">
<!-- .box-body -->
<toaster-container toaster-options="{'time-out': 1000,'position-class':'toast-center'}"></toaster-container>
<div class="box-header with-border">
    <h3 class="box-title">用户管理</h3>
</div>
<div class="box-body">
    <div class="has-feedback">
        <div style="text-align: center;background: #ffff">
            <table align="center" ng-init="searchEntity.state=0">
                <tr>
                    <td style="text-align: right">
                        <span style="white-space: nowrap;display: inline-block">姓名：</span>
                    </td>
                    <%--ng-model="searchEntity.realName"--%>
                    <td><input class="form-control" id="realnames" value="${realName}"></td>
                    <td style="text-align: right">
                        <span style="white-space: nowrap;display: inline-block">部门：</span>
                    </td>
                    <td>
                        <%--ng-model="searchEntity.department"--%>
                        <select class="form-control" id="departmentId">
                            <option value="">全部</option>
                            <%--ng-repeat="d in organlist" value="{{d.id}}" {{d.departmentName}}--%>
                            <c:forEach items="${post}" var="p">
                                <option value="${p.id}">${p.postName}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
        <div style="text-align: center;padding-top: 10px"><%--ng-click="reloadList()"--%>
            <button class="btn btn-default" onclick="likeQuery()">查询</button>
        </div>
    </div>
</div>
<div class="box-body">
    <!-- 数据表格 -->
    <div class="table-box">
        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="添加" data-toggle="modal"
                            data-target="#editModal" ng-click="addClick()"><i class="fa fa-file-o"></i> 添加
                    </button>
                </div>
            </div>
        </div>
        <!--工具栏/-->
        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="sorting">用户名</th>
                <th class="sorting">姓名</th>
                <th class="sorting">岗位名称</th>
                <th class="sorting">操作</th>
            </tr>
            </thead>
            <c:forEach items="${users}" var="u">
                <tbody><%--ng-repeat="pojo in list"--%>
                <tr>
                    <td>${u.username}</td>
                    <td>${u.realName}</td>
                    <td>${u.posts.postName}</td>
                    <td class="text-center">
                            <%--ng-click="findOne(pojo.id)"--%>
                        <button type="button" onclick="selectByUsername('${u.username}')" class="btn bg-olive btn-xs"
                                data-toggle="modal" data-target="#editModal2">
                            编辑
                        </button>
                            <%--ng-click="deleteOne(pojo.id)"--%>
                        <button type="button" class="btn bg-olive btn-xs" onclick="deleteById(${u.id})">删除
                        </button>
                    </td>
                </tr>
                </tbody>
            </c:forEach>
        </table>
        <!--数据列表/-->
        <!--分页工具条展示-->
        <%--<tm-pagination conf="paginationConf"></tm-pagination>--%>
        <ul class="pager pull-left">
            <c:if test="${map.nums==null}">
                <li>
                    <c:if test="${map.page>1}">
                        <a href="${path}/User/selectByUser?page=${map.page-1}&pageNum=5&status=13">上一页</a>
                    </c:if>

                    <c:if test="${map.page==1}">
                        <a href="#" class="btn btn-default disabled">上一页</a>
                    </c:if>
                </li>
                第 ${map.page} 页&nbsp;&nbsp;&nbsp;共 ${map.num} 页
                <li>
                    <c:if test="${map.page<map.num}">
                        <a href="${path}/User/selectByUser?page=${map.page+1}&pageNum=5&status=13">下一页</a>
                    </c:if>

                    <c:if test="${map.page==map.num}">
                        <a href="#" class="btn btn-default disabled">下一页</a>
                    </c:if>
                </li>
            </c:if>
            <li>
                <c:if test="${map.num==null && map.page==null}">
                    <c:if test="${map.pages>1}">
                        <a href="${path}/User/selectByUserLike?page=${map.pages-1}&pageNum=5&realName=${realName}<c:if test="${departmentId!=null}">&department=${departmentId}</c:if>&status=13">上一页</a>
                    </c:if>
                    <c:if test="${map.pages==1}">
                        <a href="#" class="btn btn-default disabled">上一页</a>
                    </c:if>
                    第 ${map.pages} 页&nbsp;&nbsp;&nbsp;共 ${map.nums} 页
                    <c:if test="${map.pages<map.nums}">

                        <a href="${path}/User/selectByUserLike?page=${map.pages+1}&pageNum=5&realName=${realName}<c:if test="${departmentId!=null}">&department=${departmentId}</c:if>&status=13">下一页</a>
                    </c:if>
                    <c:if test="${map.pages==map.nums}">
                        <a href="#" class="btn btn-default disabled">下一页</a>
                    </c:if>
                </c:if>
            </li>
        </ul>
        <br/>

        <div class="text-right">
            <c:if test="${map.counts==null}">
                共 ${map.count} 条数据
            </c:if>
            <c:if test="${map.count==null}">
                共 ${map.counts} 条数据
            </c:if>
        </div>
    </div>
    <!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button id="bt1" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">用户信息添加</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped">
                    <tr>
                        <%--<input type="hidden" ng-model="entity.id" class="form-control" id="id">--%>
                        <td>
                            用户名：
                        </td>
                        <td colspan="2">
                            <input id="username" ng-model="entity.username" class="form-control" placeholder="用户名"></td>
                        <td align="right">
                            密码：
                        </td>
                        <td colspan="2"><input ng-model="entity.password" id="password"
                                               class="form-control"
                                               placeholder="密码"></td>
                    </tr>
                    <tr>
                        <td>
                            姓名：
                        </td>
                        <td colspan="2"><input ng-model="entity.realName" id="realName"
                                               class="form-control"
                                               placeholder="姓名"></td>
                        <td align="right">
                            岗位名称：
                        </td>

                        <td colspan="2">
                            <select class="form-control" ng-model="entity.department" id="department">
                                <option value="">全部</option>
                                <%--ng-repeat="d in organlist" {{d.id}} {{d.departmentName}}--%>
                                <c:forEach items="${post}" var="p">
                                    <option value="${p.id}">${p.postName}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                </table>
                <div style="color: red" id="status"></div>
            </div>
            <div class="modal-footer"><%--ng-click="verify()"--%>
                <button class="btn btn-success" onclick="save()">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑窗口 -->
<div class="modal fade" id="editModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button id="bt2" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel2">用户信息编辑</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped">
                    <tr><%--ng-model="entity.id"--%>
                        <input type="hidden" class="form-control" id="id">
                        <td>
                            用户名：
                        </td>
                        <td colspan="2">
                            <input id="username2" ng-model="entity.username" class="form-control" placeholder="用户名">
                        </td>

                        <td>
                            姓名：
                        </td>
                        <td colspan="2"><input ng-model="entity.realName" id="realName2"
                                               class="form-control"
                                               placeholder="姓名"></td>
                    </tr>
                    <tr>
                        <td>
                            岗位名称：
                        </td>
                        <td colspan="2">
                            <select class="form-control" ng-model="entity.department" id="department2">
                                <%--ng-repeat="d in organlist" {{d.id}} {{d.departmentName}}--%>
                                <c:forEach items="${post}" var="p">
                                    <option value="${p.id}">${p.postName}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                </table>
                <div style="color: red" id="status2"></div>
            </div>
            <div class="modal-footer"><%--ng-click="verify()"--%>
                <button class="btn btn-success" onclick="update()">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>